<template>
  <div style="width: 100%;">
    <ElSelect v-model="type" style="width: 40%;" @change="onChangeType">
      <ElOption
        v-for="item in types"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
      <!-- <ElOption label="营销类型" value="marketType" />
      <ElOption label="拓客渠道" value="expandType" />
      <ElOption label="对象平台" value="platform" />
      <ElOption label="店铺类别" value="shoptypeRatio" />
      <ElOption label="客服类型" value="customType" /> -->
    </ElSelect>
    <ElSelect :model-value="props.query[prop]" style="width: 55%;margin-left: 5%;" @update:model-value="onChange">
      <ElOption
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </ElSelect>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { getDictByNo } from '../api'

const props = defineProps<{
  query: { marketType: string, expandType: string, platform: string, shoptypeRatio: string, customType: string }
}>()

const type = ref('marketType')
const options = ref<any[]>([])

const types = [
  { label: '营销类型', value: 'marketType' },
  { label: '拓客渠道', value: 'expandType' },
  { label: '对象平台', value: 'platform' },
  { label: '店铺类别', value: 'shoptypeRatio' },
  { label: '客服类型', value: 'customType' },
]

const propMap = new Map([
  ['marketType', 'marketTypeNo'],
  ['expandType', 'expandTypeNo'],
  ['platform', 'platformNo'],
  ['shoptypeRatio', 'shoptypeRatioNo'],
  ['customType', 'customTypeNo']
])

const prop = computed(() => {
  return propMap.get(type.value)
})

const onChangeType = (val) => {
  types.forEach(item => {
    props.query[propMap.get(item.value)] = ''
  })
  getDictByNo(val)
    .then(res => {
      options.value = res || []
    })
}
const onChange = (val) => {
  props.query[prop.value] = val
}

onMounted(() => {
  onChangeType(type.value)
})
</script>
